<!DOCTYPE html>
<html lang="en,ru">

<head>
    <meta charset="utf-8">
    <title>My new html</title>

    <link href="css/styles.css" rel="stylesheet">

    <script src="script/jquery.min.js"></script>
    <script src="script/common.js"></script>

    <!-- slider styles -->
    <link href="css/slider/main_slider_bjqs.css" rel="stylesheet">
    <link href="css/slider/main_slider_demo.css" rel="stylesheet">
    <!-- //slider styles -->

    <!-- slider scripts -->
    <script src="script/slider/main_slider_bjqs-1.3.js"></script>
    <!-- //slider scripts -->

</head>

<body>

<div class="wrapper">
    <div class="wrap">

        <div class="header">
            <h1>HEADER</h1>
        </div> <!-- Header -->

        <div class="delimiter"></div> <!-- DELIMITER -->

        <div class="body">

            <div class="content-top">

                <div class="left-col">
                    <h1>Content-top Left</h1>
                </div> <!-- left-col -->

                <div class="right-col">

                    <!-- Slider -->
                    <div id="main-slider">

                        <div id="banner-slide">

                            <ul class="bjqs">
                                <li><a href="#"><img src="image/slider/banner_1.jpg" title="test text 1" data-id="slide-1"></a></li>
                                <li><a href="#"><img src="image/slider/banner_2.jpg" title="test text 2" data-id="slide-2"></a></li>
                                <li><a href="#"><img src="image/slider/banner_3.jpg" title="test text 3" data-id="slide-3"></a></li>
                                <li><a href="#"><img src="image/slider/banner_4.jpg" title="test text 4" data-id="slide-4"></a></li>
                                <li><a href="#"><img src="image/slider/banner_5.jpg" title="test text 5" data-id="slide-5"></a></li>
                            </ul>

                        </div> <!-- banner-slide -->

                        <!-- slider-script -->
                        <script class="secret-source">
                            jQuery(document).ready(function($) {

                                $('#banner-slide').bjqs({
                                    animtype      : 'slide',
                                    height        : 308,
                                    width         : 710,
                                    responsive    : true,
                                    randomstart   : true
                                });

                            });
                        </script>
                        <!-- //slider-script -->

                    </div> <!-- main-slider -->
                    <!-- //Slider -->

                </div> <!-- right-col -->

            </div> <!-- content-top -->

            <div class="delimiter"></div> <!-- DELIMITER -->

            <div class="content">
                <h1>Content</h1>
            </div> <!-- content -->

            <div class="delimiter"></div> <!-- DELIMITER -->


            <div class="content-bottom">

                <div class="left-col">

                    <h1>Content-bottom Left</h1>

                </div> <!-- left-col -->

                <div class="right-col">

                    <h1>Content-bottom Right</h1>

                </div> <!-- right-col -->

            </div> <!-- Content-bottom -->
        </div> <!-- Body -->

        <div class="delimiter"></div> <!-- DELIMITER -->

        <div class="footer">
            <h1>FOOTER</h1>
        </div> <!-- Footer -->

    </div> <!-- Wrap -->
</div> <!-- Wrapper -->

</body>

</html>